<template>
	<view class="goal-wrapper">
		<view class="goal-card">
			<view v-if="coverImg" @tap.stop>
				<u-image @click="handleExamineImage()" width="100%" height="360" :src="coverImg" mode="aspectFill" shape="square" :lazy-load="true"></u-image>
			</view>
			<view class="goal-info-box">
				<view class="user-box">
					<view class="user-avatar" @click.stop="handleToUserCenter">
						<u-avatar size="80" mode="square" :src="goal.avatarUrl"></u-avatar>
					</view>
					<view class="user-info">
						<view class="user-name" @click.stop="handleToUserCenter">{{ goal.nickName }}</view>
						<view class="release-time">
							<view class="time">{{ goal.createTime | timeStamp }}</view>
							<view class="like">
								<view v-if="goal.goalName" class="iconfont icon-daqia clocked-in">
									<text class="clocked-in-text">已打卡</text>
								</view>
								
								<view class="followed" style="position: relative;" @click.stop="handleLike">
									<u-icon class="followed-icon" :class="goal.userClick ? 'heart-fill' : 'heart'" :name="goal.userClick ? 'heart-fill' : 'heart'" size="34"></u-icon>
									<view class="like-num">{{ goal.totalClickCount ? goal.totalClickCount > 99 ? '99+' : goal.totalClickCount : '点赞' }}</view>
								</view>
								
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="goal-container-box">
				<text class="goal-text">
					{{ goal.signWord }}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/utils/index.js'

	export default {

		props: {
			goalProp: {
				type: Object,
				required: true
			}
		},

		data() {
			return {
				showLoginDialog: false, // 是否显示登录弹窗
				defaultAvatar: require('@/static/user/default-avatar.png'),
				goal: {}
			}
		},

		watch: {
			goalProp: {
				handler(value) {
					this.goal = value
				},
				deep: true,
				immediate: true
			}
		},

		computed: {
			coverImg() {
				return this.goal.signPic ? JSON.parse(this.goal.signPic)[0] : ''
			}
		},

		methods: {
			
			// 跳转用户中心
			handleToUserCenter() {
				this.$emit('userCenter', this.goal)
			},

			// 查看图片
			handleExamineImage() {
				const imgList = this.goal.signPic ? JSON.parse(this.goal.signPic) : ''
				if (imgList) {
					uni.previewImage({
						indicator: 'none',
						urls: imgList
					})
				}
			},

			// 点赞
			async handleLike() {
				this.$emit('like', this.goal)
			}
		},

		filters: {
			timeStamp(value) {
				if (!value) return ''
				return parseTime(value)
			}
		}
	}
</script>

<style lang="scss">
	.goal-wrapper {
		margin-bottom: 50rpx;
		border-bottom: 1px solid #ddd;
	}

	.goal-card {
		margin: 0 auto;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	// 用户头像、名称、时间
	.goal-info-box {
		margin-top: 32rpx;
		margin-bottom: 12rpx;
	}

	.user-box {
		display: flex;
	}

	.user-avatar {
		margin-right: 16rpx;
	}

	.user-info {
		flex-grow: 1;
		color: #434343;
	}

	.user-info .user-name {
		margin-bottom: 8rpx;
		font-size: 28rpx;
	}

	.release-time {
		display: flex;
		justify-content: space-between;
	}

	.release-time .time {
		flex: 1;
		flex-shrink: 0;
		color: #a5a5a5;
		font-size: 24rpx;
	}

	.release-time .like {
		display: flex;
		width: 255rpx;
		align-items: center;
		justify-content: flex-end;
	}

	.release-time .like .followed {
		display: flex;
		align-items: center;
		width: 105rpx;
		margin-right: 8rpx;
	}
	
	.release-time .like .followed-icon {
		margin-right: 12rpx;
	}

	// .release-time .like .heart {
	// 	margin-right: 8rpx;
	// }

	.release-time .like .heart-fill {
		color: #e6716a;
	}

	.release-time .like .like-num {
		font-size: 28rpx;
	}
	
	.release-time .like .clocked-in {
		flex: 1;
		margin-right: 24rpx;
	}
	
	.release-time .like .clocked-in-text {
		padding-left: 5px;
		font-size: 24rpx;
	}

	.release-time .like .active {
		color: #3399ff;
	}

	// 动态信息
	.goal-container-box {
		padding-bottom: 24rpx;
	}

	.goal-container-box .goal-text {
		font-size: 28rpx;
	}
</style>
